<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <title>使用 jekyll/hexo 快速搭建博客 | Li Yi</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <meta name="generator" content="Hugo 0.74.1" />
    
    
      <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    

    
    
      <link href="/dist/css/app.4fc0b62e4b82c997bb0041217cd6b979.css" rel="stylesheet">
    

    

    
      

    

    
    
    <meta property="og:title" content="使用 jekyll/hexo 快速搭建博客" />
<meta property="og:description" content="jekyll/hexo 快速搭建博客" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/posts/hexo/2020-07-03/" />
<meta property="article:published_time" content="2020-07-03T00:00:00+00:00" />
<meta property="article:modified_time" content="2020-07-03T00:00:00+00:00" />
<meta itemprop="name" content="使用 jekyll/hexo 快速搭建博客">
<meta itemprop="description" content="jekyll/hexo 快速搭建博客">
<meta itemprop="datePublished" content="2020-07-03T00:00:00&#43;00:00" />
<meta itemprop="dateModified" content="2020-07-03T00:00:00&#43;00:00" />
<meta itemprop="wordCount" content="272">



<meta itemprop="keywords" content="hexo,jekyll," /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="使用 jekyll/hexo 快速搭建博客"/>
<meta name="twitter:description" content="jekyll/hexo 快速搭建博客"/>

	
  </head>

  <body class="ma0 avenir bg-near-white">

    
   
  

  <header>
    <div class="bg-black">
      <nav class="pv3 ph3 ph4-ns" role="navigation">
  <div class="flex-l justify-between items-center center">
    <a href="/" class="f3 fw2 hover-white no-underline white-90 dib">
      
        Li Yi
      
    </a>
    <div class="flex-l items-center">
      

      
      















    </div>
  </div>
</nav>

    </div>
  </header>



    <main class="pb7" role="main">
      
  
  <article class="flex-l flex-wrap justify-between mw8 center ph3">
    <header class="mt4 w-100">
      <aside class="instapaper_ignoref b helvetica tracked">
          
        POSTS
      </aside>
      




  <div id="sharing" class="mt3">

    
    <a href="https://www.facebook.com/sharer.php?u=/posts/hexo/2020-07-03/" class="facebook no-underline" aria-label="share on Facebook">
      <svg height="32px"  style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M28.765,50.32h6.744V33.998h4.499l0.596-5.624h-5.095  l0.007-2.816c0-1.466,0.14-2.253,2.244-2.253h2.812V17.68h-4.5c-5.405,0-7.307,2.729-7.307,7.317v3.377h-3.369v5.625h3.369V50.32z   M33,64C16.432,64,3,50.569,3,34S16.432,4,33,4s30,13.431,30,30S49.568,64,33,64z" style="fill-rule:evenodd;clip-rule:evenodd;"/></svg>

    </a>

    
    
    <a href="https://twitter.com/share?url=/posts/hexo/2020-07-03/&amp;text=%e4%bd%bf%e7%94%a8%20jekyll/hexo%20%e5%bf%ab%e9%80%9f%e6%90%ad%e5%bb%ba%e5%8d%9a%e5%ae%a2" class="twitter no-underline" aria-label="share on Twitter">
      <svg height="32px"  style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M37.167,22.283c-2.619,0.953-4.274,3.411-4.086,6.101  l0.063,1.038l-1.048-0.127c-3.813-0.487-7.145-2.139-9.974-4.915l-1.383-1.377l-0.356,1.017c-0.754,2.267-0.272,4.661,1.299,6.271  c0.838,0.89,0.649,1.017-0.796,0.487c-0.503-0.169-0.943-0.296-0.985-0.233c-0.146,0.149,0.356,2.076,0.754,2.839  c0.545,1.06,1.655,2.097,2.871,2.712l1.027,0.487l-1.215,0.021c-1.173,0-1.215,0.021-1.089,0.467  c0.419,1.377,2.074,2.839,3.918,3.475l1.299,0.444l-1.131,0.678c-1.676,0.976-3.646,1.526-5.616,1.568  C19.775,43.256,19,43.341,19,43.405c0,0.211,2.557,1.397,4.044,1.864c4.463,1.377,9.765,0.783,13.746-1.568  c2.829-1.673,5.657-5,6.978-8.221c0.713-1.716,1.425-4.851,1.425-6.354c0-0.975,0.063-1.102,1.236-2.267  c0.692-0.678,1.341-1.419,1.467-1.631c0.21-0.403,0.188-0.403-0.88-0.043c-1.781,0.636-2.033,0.551-1.152-0.402  c0.649-0.678,1.425-1.907,1.425-2.267c0-0.063-0.314,0.042-0.671,0.233c-0.377,0.212-1.215,0.53-1.844,0.72l-1.131,0.361l-1.027-0.7  c-0.566-0.381-1.361-0.805-1.781-0.932C39.766,21.902,38.131,21.944,37.167,22.283z M33,64C16.432,64,3,50.569,3,34S16.432,4,33,4  s30,13.431,30,30S49.568,64,33,64z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/></svg>

    </a>

    
    <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url=/posts/hexo/2020-07-03/&amp;title=%e4%bd%bf%e7%94%a8%20jekyll/hexo%20%e5%bf%ab%e9%80%9f%e6%90%ad%e5%bb%ba%e5%8d%9a%e5%ae%a2" class="linkedin no-underline" aria-label="share on LinkedIn">
      <svg  height="32px"  style="enable-background:new 0 0 65 65;" version="1.1" viewBox="0 0 65 65" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M50.837,48.137V36.425c0-6.275-3.35-9.195-7.816-9.195  c-3.604,0-5.219,1.983-6.119,3.374V27.71h-6.79c0.09,1.917,0,20.427,0,20.427h6.79V36.729c0-0.609,0.044-1.219,0.224-1.655  c0.49-1.22,1.607-2.483,3.482-2.483c2.458,0,3.44,1.873,3.44,4.618v10.929H50.837z M22.959,24.922c2.367,0,3.842-1.57,3.842-3.531  c-0.044-2.003-1.475-3.528-3.797-3.528s-3.841,1.524-3.841,3.528c0,1.961,1.474,3.531,3.753,3.531H22.959z M34,64  C17.432,64,4,50.568,4,34C4,17.431,17.432,4,34,4s30,13.431,30,30C64,50.568,50.568,64,34,64z M26.354,48.137V27.71h-6.789v20.427  H26.354z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/>
</svg>

    </a>
  </div>


      <h1 class="f1 athelas mt3 mb1">使用 jekyll/hexo 快速搭建博客</h1>
      
      <p class="tracked">
          By <strong>
          
              liyi
          
          </strong>
      </p>
      
      
      <time class="f6 mv4 dib tracked" datetime="2020-07-03T00:00:00Z">July 3, 2020</time>

      
      
    </header>
    <div class="nested-copy-line-height lh-copy serif f4 nested-links nested-img mid-gray pr4-l w-two-thirds-l"><p><strong>1、托管gihub无需自己搭建服务器，而且可以绑定自己的域名</strong>
**2、轻量级的博客系统，使用标记语言，比如Markdown **
<strong>3、个人学习记录</strong></p>
<h4 id="环境搭建">环境搭建</h4>
<h5 id="github-pages-仓库创建">Github Pages 仓库创建</h5>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-txt" data-lang="txt">创建一个 [username].github.io 仓库
如：[xiaoliz-me.github.io](https://xiaoliz-me.github.io/)
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">git clone git@github.com:XiaoLiz-me/XiaoLiz-me.github.io.git
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">cd XiaoLiz-me
echo <span style="color:#e6db74">&#34;Hello World&#34;</span> &gt; index.html
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">git commit -m <span style="color:#e6db74">&#34;Initial commit&#34;</span>
git push -u origin master
</code></pre></div><h5 id="jekyll">Jekyll</h5>
<p><strong>1. 安装环境</strong></p>
<pre><code>gem install jekyll bundler
</code></pre><p><strong>2. 生成项目</strong></p>
<pre><code>jekyll new my-awesome-site
</code></pre><p><strong>3. 安装依赖</strong></p>
<pre><code>cd my-awesome-site

bundle install
</code></pre><p><strong>4. 本地预览</strong></p>
<pre><code>bundle exec jekyll serve
</code></pre><h4 id="hexo使用">Hexo使用</h4>
<p><strong>1、检查是否安装 nodejs、git</strong></p>
<p>Nodejs安装 <a href="http://nodejs.cn/download/">官网</a></p>
<p>Git安装 <a href="http://nodejs.cn/download/">官网</a></p>
<p>百度网盘 <a href="https://pan.baidu.com/s/1K8hh-QhlUueDz408exKI1A">下载</a>
提取码: rapq</p>
<p>安装完node 新建一个终端窗口，执行命令验证是否安装成功：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">node -v
v12.16.0

git  --version
git version 2.9.2
</code></pre></div><p>**2、安装 Hexo **</p>
<pre><code>npm install -g hexo-cli

</code></pre><p><strong>2、初始化 Hexo 手脚架</strong></p>
<pre><code>hexo init my-blog


</code></pre><p><strong>3、项目创建成功后，安装项目依赖</strong></p>
<pre><code>cd my-blog &amp;&amp; npm install

</code></pre><p><strong>4、本地预览项目</strong></p>
<pre><code>hexo serve or  hexo serve

</code></pre><p><strong>5、生成静态文件</strong></p>
<pre><code>hexo generate or hexo g
</code></pre><h5 id="开发前基于master-checkout一个分支-gh-pages-作为源码分支基于编写markdown">开发前基于master checkout一个分支 gh-pages 作为源码分支基于编写Markdown</h5>
<p><em>hexo需要区分发布分支和源码分支，如果部署在一个分支，进行了 hexo clean 操作所有文件都将彻底清除</em></p>
<pre><code>git checkout -b gh-pages
</code></pre><h4 id="部署至-github-pages">部署至 Github Pages</h4>
<h5 id="hexo-deployer-本地一键部署">hexo-deployer 本地一键部署：</h5>
<p>1、在项目根目录下安装，本地一键部署依赖 <a href="https://github.com/hexojs/hexo-deployer-git">hexo-deployer-git</a></p>
<pre><code>cd my-blog

npm install hexo-deployer-git --save-dev
</code></pre><p>2、部署前检查配置项目_config.yml， deploy参数，默认是注释的, 部署配置如下:</p>
<p>username 对应github 账号用户名</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#66d9ef">deploy</span>:
  <span style="color:#66d9ef">type</span>: git
  <span style="color:#66d9ef">repo</span>: https://github.com/username/username.github.io
  <span style="color:#66d9ef">branch</span>: master  <span style="color:#75715e">#发布到master分支</span>
</code></pre></div><p><em>如果不进行区分，编译后的文件部署在根目录，布前如果执行 hexo clean 会导致根目录里面的文件全部丢失，彻底无法找回</em></p>
<p>3、部署：</p>
<pre><code>hexo clean &amp;&amp; hexo generate &amp;&amp; hexo deploy
</code></pre><p>此时github pages配置完毕，直接访问 username.github.io即可</p>
<h5 id="travis-ci-自动化部署">travis CI 自动化部署：</h5>
<p><strong>配置github token</strong>
1、仓库权限设置
<img src="/images/hexo/001.jpeg" alt="01"></p>
<p>2、生成token</p>
<p><img src="/images/hexo/002.jpeg" alt="02"></p>
<p>3、生成成功复制保存，只会显示一次，目的可能是为了安全</p>
<p><img src="/images/hexo/003.jpeg" alt="03"></p>
<p><strong>授权 Travis ci项目权限</strong></p>
<p>1、授权github</p>
<p><img src="/images/hexo/004.jpeg" alt="04"></p>
<p>2、Activate all repositories using GitHub Apps（github 授权激活所有仓库）
<img src="/images/hexo/005.jpeg" alt="05"></p>
<p>3、设置项目绑定 github token
<img src="/images/hexo/006.jpeg" alt="06"></p>
<p>4、GH_TOKEN设置
<img src="/images/hexo/007.jpeg" alt="07"></p>
<p><strong>创建 .travis.yml</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#66d9ef">language</span>: node_js
<span style="color:#66d9ef">node_js</span>: stable

<span style="color:#75715e"># 分支白名单限制:会触发travis ci构建</span>
<span style="color:#66d9ef">branches</span>:
  <span style="color:#66d9ef">only</span>:
    - gh-pages <span style="color:#75715e"># travis编译分支</span>

<span style="color:#66d9ef">script</span>:
  - hexo clean    <span style="color:#75715e"># 清除缓存文件</span>
  - hexo generate <span style="color:#75715e"># 生成静态文件</span>

<span style="color:#66d9ef">deploy</span>:
  <span style="color:#66d9ef">provider</span>: pages
  <span style="color:#66d9ef">skip-cleanup</span>: <span style="color:#66d9ef">true</span>
  <span style="color:#66d9ef">github-token</span>: $GH_TOKEN  <span style="color:#75715e"># travis环境变量设置的名称</span>
  <span style="color:#66d9ef">keep-history</span>: <span style="color:#66d9ef">true</span>      <span style="color:#75715e"># 是否保持target-branch分支的提交记录</span>
  <span style="color:#66d9ef">target-branch</span>: master   <span style="color:#75715e"># 要将静态站点文件发布到哪个分支</span>
  <span style="color:#66d9ef">on</span>:
    <span style="color:#66d9ef">branch</span>: gh-pages        <span style="color:#75715e"># 博客源码的分支</span>
  <span style="color:#66d9ef">local-dir</span>: public         <span style="color:#75715e"># 本地发布文件目录</span>
</code></pre></div><p>以上配置完成后推送至远程仓库</p>
<p><strong>4、push origin gh-pages branch，触发travis ci</strong></p>
<pre><code>git add -A  # 把所有修改的文件添加到暂存区

git commit -m 'commit messages'

git push  #推送至远端 gh-pages
</code></pre><h5 id="总结">总结</h5>
<p><strong>jekyll 与hexo各自优缺点</strong></p>
<p>jekyll：</p>
<pre><code>优势：一键操作、零配置、github自动解析jekyll
不足：就是安装依赖配置非常慢，
</code></pre><p>hexo</p>
<pre><code>优势：基于nodejs，渲染速度快
不足：配置稍微繁琐
</code></pre><h5 id="其它资源介绍">其它资源介绍</h5>
<p>1、<a href="https://gitalk.github.io/">gitalk</a>
2、<a href="https://www.gitment.cn/">gitment</a>
3、<a href="https://www.vuepress.cn/">VuePress 静态网站生成器</a></p>
<ul class="pa0">
  
   <li class="list">
     <a href="/tags/hexo" class="link f5 grow no-underline br-pill ba ph3 pv2 mb2 dib black sans-serif">hexo</a>
   </li>
  
   <li class="list">
     <a href="/tags/jekyll" class="link f5 grow no-underline br-pill ba ph3 pv2 mb2 dib black sans-serif">jekyll</a>
   </li>
  
</ul>
<div class="mt6 instapaper_ignoref">
      
      
      </div>
    </div>

    <aside class="w-30-l mt6-l">




</aside>

  </article>

    </main>
    <footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
  <div class="flex justify-between">
  <a class="f4 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="" >
    &copy;  Li Yi 2020 
  </a>
    <div>














</div>
  </div>
</footer>

    

  <script src="/dist/js/app.3fc0f988d21662902933.js"></script>


  </body>
</html>
